import { Add, Category, Find, Home, User } from '@nutui/icons-react';
import { Tabbar } from '@nutui/nutui-react';
import { Outlet, useNavigate } from 'react-router-dom';
import { Card, Mask, Button } from 'antd-mobile'
import { useState } from 'react';

export default function Index() {
    const Navigate = useNavigate()
    const [visible, setVisible] = useState(false)
    const Change = (value) => {
        if (value === 3) {
            Navigate('/Chat')
        } else if (value === 4) {
            Navigate('/My')
        } else if (value === 0) {
            Navigate('/')
        } else if (value === 1) {
            Navigate('/gshow')
        }
    }
    return (
        <div>
            <Tabbar defaultValue={0} fixed={true} activeColor='green' onSwitch={(value) => Change(value)}>
                <Tabbar.Item title="首页" icon={<Home width={18} height={18} />} />
                <Tabbar.Item title="宝库" icon={<Category width={18} height={18} />} />
                <Tabbar.Item title='' icon={<div style={{ height: '35px', width: '35px', backgroundColor: 'green', color: 'white', borderRadius: '50%' }} >
                    <Add style={{ marginTop: '5px' }} onClick={() => {
                        if (sessionStorage.getItem('token')) {
                            setVisible(true)
                        } else {
                            Navigate('/login')
                        }
                    }} /></div>} />
                <Tabbar.Item title="消息" icon={<Find width={18} height={18} />} />
                <Tabbar.Item title="我的" icon={<User width={18} height={18} />} />
            </Tabbar>
            <Mask visible={visible} color='white' opacity='thick' onMaskClick={() => setVisible(false)}>
                <div>
                    <Card
                        style={{
                            height: '100px',
                            marginTop: '50px',
                            background: '#eee',
                            marginLeft: '10px',
                            marginRight: '10px'
                        }} >
                        <p style={{
                            fontSize: '30px',
                            color: '#000',
                        }}>
                            优尼，让你的闲置更COOL
                        </p>
                    </Card>
                    <div style={{
                        display: 'flex',
                        justifyContent: 'space-around',
                        width: '100%',
                        minHeight: '100px',
                        alignItems: 'center',
                        position: 'absolute',
                        bottom: '150px'
                    }}>
                        <div>
                            <span className='iconfont icon-xin-iconguifan_chakanchumenma'
                                style={{ color: "green", fontSize: "50px" }}
                                onClick={() => {
                                    Navigate('/cellbook')
                                }}
                            >
                            </span>
                            <p>扫码发书</p>
                        </div>
                        <div>
                            <span className='iconfont icon-fasong'
                                style={{ color: "green", fontSize: "50px" }}
                                onClick={() => {
                                    Navigate('/public')
                                }}
                            ></span>
                            <p>发布闲置</p>
                        </div>
                        <div>
                            <span className='iconfont icon-huishou'
                                style={{ color: "green", fontSize: "50px" }}
                                onClick={() => {
                                    Navigate('/type')
                                }}
                            ></span>
                            <p>官方回收</p>
                        </div>

                    </div>
                    <p style={{
                        textAlign: 'center',
                        position: 'absolute',
                        bottom: '80px',
                        fontSize: '30px',
                        width: '100%',
                    }} onClick={() => { setVisible(false) }}>X</p>
                </div>
            </Mask>
            <Outlet></Outlet>
        </div>
    )
}